<template>
  <div class="salary-container">
    <van-nav-bar
      style="background-color: #fff;"
      title="社保查询"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <header-card :myProp="myProp"></header-card>
    <div class="main-box">
      <div class="social-list-box">
        <div class="list-box" @click="toPersonSocialInfoPage">
          <img src="../../assets/image/个人参保信息.png" alt=""/>
          <span>个人参保信息</span>
          <van-icon class="arrow" name="arrow" />
        </div>
        <div class="list-box" @click="toHomePage">
          <img src="../../assets/image/养老保险.png" alt=""/>
          <span>养老保险</span>
          <van-icon class="arrow" name="arrow" />
        </div>
        <div class="list-box" @click="toPdfPage">
          <img src="../../assets/image/失业保险.png" alt=""/>
          <span>失业保险 pdf预览</span>
          <van-icon class="arrow" name="arrow" />
        </div>
        <div class="list-box" @click="showFlag = true">
          <img src="../../assets/image/医疗保险.png" alt=""/>
          <span>医疗保险</span>
          <van-icon class="arrow" name="arrow" />
        </div>
        <div class="list-box">
          <img src="../../assets/image/工伤保险.png" alt=""/>
          <span>工伤保险</span>
          <van-icon class="arrow" name="arrow" />
        </div>
        <div class="list-box list-box-last">
          <img src="../../assets/image/生育保险.png" alt=""/>
          <span>生育保险</span>
          <van-icon class="arrow" name="arrow" />
        </div>
      </div>
      <div class="empty-box"></div>
    </div>
    <!-- <van-overlay :show="showFlag" @click="showFlag = false" /> -->
    <up-overlay :show="showFlag" @click.native="toShow">
      <div class="wrapper">
        <div class="block">123123</div>
      </div>
    </up-overlay>
  </div>
</template>

<script>
import HeaderCard from '@/components/headerCard.vue'
import overlay from '@/components/common/overlay/overlay.vue'
export default {
  name: 'salaryRecordSearch',
  components: {
    'header-card': HeaderCard,
    'up-overlay': overlay
  },
  data () {
    return {
      show: false,
      showFlag: false,
      username: '',
      phone: '',
      sms: '',
      recordArrow: 'arrow-down',
      currentDate: new Date(),
      myProp: {
        username: '刘*红',
        idNum: '440223********2235',
        isIndex: false
      }
    }
  },
  created () {
  },
  methods: {
    toShow () {
      this.showFlag = false
      console.log('组件外', this.showFlag)
    },
    // 前往pdf预览
    toPdfPage () {
      this.$router.push({
        path: '/previewPdf',
        query: {
          url: 'url'
        }
      })
    },
    // 深圳app首页
    toHomePage () {
      this.$router.push('/home')
    },
    // 前往个人参保信息页面
    toPersonSocialInfoPage () {
      this.$router.push('/personSocialInfo')
    },
    onConfirm (value, index) {
      console.log(value, index)
      this.show = false
      this.recordYear = value
      this.recordArrow = 'arrow-down'
    },
    // 切换年份
    changeYear () {
      this.recordArrow = 'arrow-up'
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
// @import url('./test.less'); // 引入文件夹内的less文件
.salary-container{
  font-size: 14px;
  min-height: 100vh;
  background-color: #f8f8f8;
  .main-box{
    position: relative;
    background-color: #f8f8f8;
    .social-list-box{
      width: 88%;
      margin: 0 3.5%;
      border-radius: 5px;
      position: relative;
      top: -60px;
      padding: 10px;
      background-color: #fff;
      // box-shadow: 1px 2px 10px #ccdaf8;
      .list-box{
        height: 80px;
        position: relative;
        font-size: 16px;
        &::after{
          content: '';
          width: 85%;
          height: 1px;
          background-color: #f4f4f4;
          position: absolute;
          bottom: 0;
          left: 45px;
        }
        &:active{
          background-color: #eee;
        }
        img{
          width: 25px;
          height: 25px;
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
        }
        span{
          margin-left: 45px;
          line-height: 80px;
        }
        .arrow{
          color:#0f72fd;
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
        }
      }
      .list-box-last{
        &::after{
          content: '';
          width: 85%;
          height: 1px;
          background-color: transparent;
          position: absolute;
          bottom: 0;
          left: 45px;
        }
      }
      .btn{
        margin-top: 15px;
      }
    }
    .btn{
      margin-top: 15px;
    }
  }
  .empty-box{
    height: 30px;
    width: 100%;
    background-color: transparent;
  }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
    border-radius: 4px;
  }
</style>
